<template>
  <div class="btn-group">
    <el-button v-for="btnAttr in btnAttrs"
      :type="btnAttr.type"
      :key="btnAttr.id"
      :icon="btnAttr.icon"
      :class="btnAttr.className"
      @click="handleClick(btnAttr.btnType, btnAttr.uri)">
      {{btnAttr.name}}
    </el-button>
  </div>
</template>

<script>
import { findUserPermissionBtnsByParent } from '@/http/AppApi'
import { getBtnAttr } from '@/utils/BtnAttrUtil'
export default {
  props: {
    currentSelectedData: {
      type: Array,
      default: () => {
        return []
      }
    },
    resourceList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      submit: '提交',
      isBtnShow: true,
      btnAttrs: [],
      dialogFormVisible: true,
      name: ''
    }
  },
  created () {
    this.getResourceList()
  },
  mounted () {
    this.name = this.$route.name
  },
  methods: {
    getResourceList () {
      let id = this.$route.meta.id
      if (id) {
        findUserPermissionBtnsByParent(id).then(resp => {
          if (resp.code && resp.code === '200') {
            let data = resp.data
            if (data) {
              this.buildBtnList(data)
            }
          }
        })
      }
    },
    buildBtnList (resourceList) {
      let list = resourceList
      if (list && list instanceof Array) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].type === 'btn') {
            let btnAttr = getBtnAttr(list[i])
            this.btnAttrs.push(btnAttr)
          }
        }
      }
    },
    handleClick (btnType, uri) {
      let curSlectedData = this.currentSelectedData
      if (btnType === 'put' ||
        btnType === 'get' ||
        btnType === 'draw' ||
        btnType === 'manage' ||
        btnType === 'delete' ||
        btnType === 'approve' ||
        btnType === 'not_approve' ||
        btnType === 'recommend' ||
        btnType === 'not_recommend' ||
        btnType === 'town_recommend' ||
        btnType === 'user_config' ||
        btnType === 'set_overdue' ||
        btnType === 'set_important' ||
        btnType === 'evaluationn' ||
        btnType === 'check_flow' ||
        btnType === 'check_area') {
        if (curSlectedData && curSlectedData instanceof Array) {
          if (curSlectedData.length !== 1) {
            this.$message({ message: '您最多选择一条数据', type: 'warning' })
            return
          }
        }
      }
      let sohwOnly = false
      let name = ''
      switch (btnType) {
        case 'post':
          name = '新增'
          curSlectedData = []
          break
        case 'put':
          name = '修改'
          break
        case 'get':
          name = '查看'
          sohwOnly = true
          break
        case 'delete':
          name = '删除'
          break
        default: break
      }
      if (!btnType) {
        console.error('请求方式未指定, btnType = ' + btnType)
      }

      let callbackData = {}
      callbackData.btnType = btnType
      callbackData.uri = uri
      callbackData.rows = curSlectedData
      callbackData.dialogTitle = name + this.name
      callbackData.sohwOnly = sohwOnly
      callbackData.name = this.name
      this.$emit('btnClickCallback', callbackData)
    }
  }
}
</script>
<style scoped>
.btn-group {
  margin-bottom: 10px;
}
.el-dialog__body {
  padding: 10px 0;
}
.dialog-style {
  border-radius: 4px;
}
.btn-style-byself-cornflowerblue {
  color: aliceblue;
  background-color: cornflowerblue;
  border-color: cornflowerblue;
}
.btn-style-byself-cornflowerblue:hover {
  background-color: rgb(116, 160, 240);
  border-color: rgb(116, 160, 240);
  color: white
}
.btn-style-byself-green {
  color: aliceblue;
  background-color: rgb(105, 237, 100);
  border-color: rgb(105, 237, 100);
}
.btn-style-byself-green:hover {
  background-color: rgb(135, 236, 131);
  border-color: rgb(135, 236, 131);
  color: white
}
.btn-style-byself-deadgreen {
  color: aliceblue;
  background-color: rgb(63, 230, 166);
  border-color: rgb(63, 230, 166);
}
.btn-style-byself-deadgreen:hover {
  background-color: rgb(115, 236, 190);
  border-color: rgb(115, 236, 190);
  color: white
}
.btn-style-byself-red {
  color: aliceblue;
  background-color: rgb(141, 28, 28);
  border-color: rgb(141, 28, 28);
}
.btn-style-byself-red:hover {
  background-color: rgb(141, 59, 59);
  border-color: rgb(141, 59, 59);
  color: white
}
.btn-style-byself-purple {
  color: aliceblue;
  background-color: rgb(138, 44, 122);
  border-color: rgb(138, 44, 122);
}
.btn-style-byself-purple:hover {
  background-color: rgb(143, 69, 131);
  border-color: rgb(143, 69, 131);
  color: white
}
.btn-style-byself-yellowgreen {
  color: aliceblue;
  background-color: yellowgreen;
  border-color: yellowgreen;
}
.btn-style-byself-yellowgreen:hover {
  background-color: rgb(174, 206, 109);
  border-color: rgb(174, 206, 109);
  color: white
}
</style>
